<html>
<head>
    <meta charset="utf-8">
    <title>时光轴效果</title>
    <style type="text/css">

        body{ background: #fff;margin: 0px;padding: 0;padding-top: 41px;background: url(images/1.jpg) #1c0c0f  center 0 no-repeat fixed;}

        .top{width: 100%;top:0px;height:41px;background-color: #001E3B;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);position: fixed;z-index: 999;}
        .header{height: 200px;background-color: rgba(255,255,255,.2);width: 960px;margin: 0px auto;}

        .container{width: 960px;min-width:960px;margin: 0px auto;position: relative;}
        .hide{display: none;}
        .clear{clear: both;height: 40px}


        .scrubber {position: absolute;top: 29px;left: 0px;width: 47px;z-index: 999}
        .scrubber a{
            height: 26px;line-height: 26px;
            padding-right: 5px;font-size: 12px;
            color: #a5a5a5;text-decoration: none; display: block;
            border-right:2px solid #c8c8c8;
            border-right-color: rgba(200,200,200,.5);
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            text-align: right;
        }
        .scrubber a:hover,
        .scrubber a.cur{border-right-color: #7ebad0;color: #7ebad0;font-weight: bold;}
        .scrubber a:hover{text-decoration: underline;}
        .scrubber a.cur:hover{text-decoration: none;}
        
        .spine{display: block;width: 3px;height: 100%;background: #eee;}

        #scrubber  .s_month{display: none;}


        .content{min-height:1000px;padding-left: 160px;padding-top:50px;background:url(images/spine.png) repeat-y  121px 0;position: relative;}

        .c_year{
            height:30px;line-height: 30px;
            color: #a5a5a5;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight: bold;font-size: 14px;
            position: relative;left:-90px;
            clear: both;
        }

        .c_item{width:370px;background: #fff;height: auto;margin: 20px 30px 0 0;position: relative;border-radius: 4px;color: #888;}
        .c_item_left{float: left;}
        .c_item_first{margin-top: -20px;}
        .c_item_right{float: right;}
        .c_item_right .c_i_icon_dot{left: -443px;}

        .c_i_icon_arrow{
            position: absolute;
            height: 0px;
            border-color: transparent #e2e2e2 transparent transparent;
            border-width: 10px 10px 10px 0;
            border-style: dashed solid dashed dashed;
            border-right-color: #fff;
            left: -10px;top: 20px;
        }
        .c_i_icon_dot{
            width: 11px;
            height: 11px;
            border-radius: 11px;
            position: absolute;
            left: -43px;top: 25px;   
            background: #fff;
        }
        .c_i_icon_dot_child{
            width: 7px;
            height: 7px;
            border-radius: 7px;
            position: absolute;
            left: 2px;top: 2px;   
            background: #b3dae9;
        }

        .c_i_head{padding: 15px 15px 0px 15px;}

        .c_i_head_title{height: 46px;line-height: 46px;font-size: 28px;padding: 0px 0px 10px 56px;position: relative;}
        .c_i_head_intro{
            margin-bottom: 10px;
            font-size: 14px;
            line-height: 22px;
            padding: 0 15px;
        }
        .c_i_head_title_icon{
            width: 46px;height: 46px;background-color: #b3dae9;border-radius: 8px;position: absolute;left: 0px;top: 0px;
            overflow: hidden;
            color:#fff;
            font-size: 27px;
            line-height: 23px;
        }
        .c_i_media{padding-bottom: 10px;height: 277px;overflow: hidden;}
        .c_i_footer{padding: 10px 15px;margin: 0px 15px;border-top: 1px solid #d6d6d6;font-size: 12px;color: #b2b2b2;}
        
        .c_i_footer_info{}
        .c_i_footer_info .ui_ico{
            width: 20px;
            height: 20px;
            vertical-align: middle;
            visibility: visible;
        }
        .c_i_footer_like{line-height: 20px;padding-top: 5px;}

        .c_i_footer a{color: #b2b2b2;text-decoration: none;padding-right: 10px;display: inline-block;height: 20px;}
        .c_i_footer a:hover{color: #6EB8D3;text-decoration: underline;}

        .ui_ico, .ui_icon {
            width: 15px;
            height: 15px;
            display: inline-block;
            background-repeat: no-repeat;
            font-size: 0;
            overflow: hidden;
        }
        .quote_after {
            vertical-align: bottom;
            background-image: url(images/timeline.png);
            background-position: -986px -102px;
            margin-left: 5px;
        }
        .quote_before{
            vertical-align: top;
            background-image: url(images/timeline.png);
            background-position: -986px -85px;
            margin-right: 5px;
        }
        .ico_zan {
            background-image: url(images/timeline.png);
            background-position: -883px -21px;
        }
        .ico_com {
            background-image: url(images/timeline.png);
            background-position: -897px -42px;
        }
    </style>
</head>
<body>

<!-- 模版定义 -->
<div class="hide">
    <div id="tpl_scrubber_year">
        <a href="javascript:;" onclick="showYear({year},this)" class="s_year" id="scrubber_year_{year}">{year}
            {list}
        </a>
    </div>

    <div id="tpl_scrubber_month" >
           <a href="javascript:;" class="s_month {year}_month" onclick="showMonth({year},{month},this)" id="scrubber_month_{year}{month}" >{month}月</a>
    </div>

    <div id="tpl_content_year">

        <div class="c_year" id="content_year_{year}">{year}</div>
        {list}

    </div>

    <div id="tpl_content_month">

        <div class="c_item c_item_{leftOrRight} content_date_{year}{month} {isFirst}">

            <div class="c_i_icon_arrow"></div>
            <div class="c_i_icon_dot"><div class="c_i_icon_dot_child"></div></div>

            <div class="c_i_head">

                <div class="c_i_head_title">
                    <div class="c_i_head_title_icon">{lunar}</div>
                    {date}
                </div>
                <div class="c_i_head_intro">
                    <i class="ui_ico quote_before"></i>
                    {intro}
                    <i class="ui_ico quote_after"></i>
                </div>
            </div>
            <div class="c_i_media">
                {media}
            </div>
            <div class="c_i_footer">
                <div class="c_i_footer_info">
                        <a href="javascript:void(0)" class="op_zan" title="赞">
                            <i class="ui_ico ico_zan">赞</i>({like})</a>
                        <a href="javascript:void(0)" class="op_pin" title="评论">
                            <i class="ui_ico ico_com">评论</i>({comment})</a>
                </div>
                <div class="c_i_footer_like">
                    {like_format}人觉得很赞
                </div>
            </div>

        </div>

    </div>

</div>
<!--  网页内容 -->

    <div class="top"></div>
    <div class="header"></div>

    <div class="container">



        <div class="scrubber" id="scrubber"> <!-- 时序列表 -->
<!--
            <a href="javascript:;" onclick="scroll(0)">现在</a>

            <a href="javascript:;" onclick="showYear(2014,this)" class="s_year">2014
                <a href="#" class="s_month 2014_month">3月</a>
            </a>

            <a href="javascript:;" onclick="showYear(2015,this)" class="s_year">2015
                <a href="#" class="s_month 2015_month">3月</a>
            </a>
-->
        </div>


        <div class="content" id="content"> <!-- 内容 -->

<!--
            <div class="c_year">2014</div>

            <div class="c_item c_item_left" class="item_month_20143">

                <div class="c_i_icon_arrow"></div>
                <div class="c_i_icon_dot"><div class="c_i_icon_dot_child"></div></div>

                <div class="c_i_head">

                    <div class="c_i_head_title">
                        <div class="c_i_head_title_icon">初<br/>&nbsp;&nbsp;&nbsp;五</div>
                        2014-3-31
                    </div>
                    <div class="c_i_head_intro">
                        <i class="ui_ico quote_before"></i>
                        在这春林初盛，草长莺飞的日子，QQ空间愿你关掉电脑，放下手机，与三五好友相约青山绿水中，感受春天带来的勃勃生机···
                        <i class="ui_ico quote_after"></i>
                    </div>
                </div>
                <div class="c_i_media">


                </div>
                <div class="c_i_footer">
                    <div class="c_i_footer_info">
                            <a href="javascript:void(0)" class="op_zan" title="赞">
                                <i class="ui_ico ico_zan">赞</i>(32906)</a>
                            <a href="javascript:void(0)" class="op_pin" title="评论">
                                <i class="ui_ico ico_com">评论</i>(883)</a>
                    </div>
                    <div class="c_i_footer_like">
                        3.2万人觉得很赞
                    </div>
                </div>

            </div>
-->


        </div>
    </div>

    <script type="text/javascript" src="js/data.js"></script>
    <script type="text/javascript" src="js/fx.js"></script>
    <script type="text/javascript" src="js/GetLunarDay.js"></script>

    <script type="text/javascript">

//--------  公共函数

    var g = function(id){ return document.getElementById(id);}
    var getBodyW = function(){ return document.body.offsetWidth; };
    var getBodyH = function(){ return document.body.offsetHeight; };
    var getElTop = function(el){ return el.offsetTop+170; };

//--------  模版内容输出

        //  分析归类数据
        var list = {};  //  { year: { month : [ item ,item ] } }

        data.sort(function(a,b){
            return new Date(a.date).getTime() > new Date(b.date).getTime();
        })

        //  格式化数据
        for (var i = data.length - 1; i >= 0; i--) {

            var date = new Date(data[i].date);
            var year  = date.getFullYear();
            var month = date.getMonth()+1;
            var lunar = GetLunarDateString( date );

            if( !list[year] ){ list[year] = {}; }
            if( !list[year][month] ){ list[year][month] = []; }

            var item = data[i];
            item.lunar = lunar[0]+'<br>&nbsp;&nbsp;&nbsp;'+lunar[1];
            item.like_format = item.like < 10000 ? item.like : ( item.like / 10000 ).toFixed(1) + '万';

            list[year][month].push( item );
        };


        //  最终html内容
        var html_scrubber = [];
        var html_content  = [];

        //  模版
        var tpl_scrubber_year = g('tpl_scrubber_year').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
        var tpl_scrubber_month = g('tpl_scrubber_month').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');

        var tpl_content_year = g('tpl_content_year').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
        var tpl_content_month = g('tpl_content_month').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');

        //  构建时序和内容html
        for (year in list) {

            var scrubber_month = [];
            var content_month = [];

            var isLeft = 0;

            for (month in list[year]) {
                scrubber_month.unshift(  tpl_scrubber_month.replace(/\{year\}/g,year).replace(/\{month\}/g,month) );

                for (var i = list[year][month].length - 1; i >= 0; i--) {
                    var item = list[year][month][i];

                    isLeft = isLeft ^ 1;
                    content_month.unshift(
                        ( (i==0) ?  '<div class="clear c_month" id="c_month_'+year+'_'+month+'"></div>'   : '' ) + tpl_content_month.replace(/\{year\}/g,year).replace(/\{month\}/g,month)
                            .replace(/\{lunar\}/g,item.lunar)
                            .replace(/\{date\}/g,item.date)
                            .replace(/\{intro\}/g,item.intro)
                            .replace(/\{media\}/g,item.media)
                            .replace(/\{like\}/g,item.like)
                            .replace(/\{comment\}/g,item.comment)
                            .replace(/\{like_format\}/g,item.like_format)
                            .replace(/\{leftOrRight\}/g, isLeft ? 'left' : 'right')
                            .replace(/\{isFirst\}/g, i == 0 ? 'c_item_first' : '')
                        ) ;
                };

            };
            html_scrubber.unshift( tpl_scrubber_year.replace(/\{year\}/g,year).replace(/\{list\}/g,scrubber_month.join('') ) );

            html_content.unshift( tpl_content_year.replace(/\{year\}/g,year).replace(/\{list\}/g,content_month.join('') )  );
        };

        //  写入内容
        g('scrubber').innerHTML = '<a href="javascript:;" onclick="scrollTopTo(0)">现在</a>'+html_scrubber.join('')+'<a href="javascript:;" onclick="scrollTopTo(getBodyH())">出生</a>';
        g('content').innerHTML = html_content.join('')+ tpl_content_year.replace(/\{year\}/g,'出生').replace(/\{list\}/g,'')+'<div class="clear c_month" id="c_month_0_0"></div>'  ;



//--------  脚本处理

        //  动画卷动
        var  scrollTopTo = function( to ){
            var start =  document.body.scrollTop;
            fx( function( now , type ){  window.scroll(0,now); },start ,to );
        }


        //  展开时序
        var expandScrubber = function( year,elem ){

            var years  = document.getElementsByClassName('s_year');
            var months = document.getElementsByClassName('s_month');

            var year_months = document.getElementsByClassName(year+'_month');

            //  清理所有年份的 cur 样式
            for (var i = years.length - 1; i >= 0; i--) {
                years[i].className = 's_year';
            };
            
            //  隐藏所有的月份
            for (var i = months.length - 1; i >= 0; i--) {
                months[i].style.display = 'none';
            };

            //  展现当前年份下所有的月份
            for (var i = year_months.length - 1; i >= 0; i--) {
                year_months[i].style.display = 'block';
            };

            //  设置当前年份的 cur 样式
            elem.className = 's_year cur';
        }

        //  高亮月份
        var highlightMonth = function( year , month , elem ){
            
            var months = document.getElementsByClassName(year+'_month');
            for (var i = months.length - 1; i >= 0; i--) {
                months[i].className = months[i].className.replace('cur','');

            };
            elem.className = elem.className+' cur';
        }

        //  年份点击处理
        var showYear = function(year,elem){
            expandScrubber(year ,elem);
            var top = getElTop( g('content_year_'+year) );
            scrollTopTo( top );
            //  滚动到当前年份的位置
        }

        //  月份点击处理
        var showMonth = function( year , month ,elem ){
            var top = getElTop( document.getElementsByClassName('content_date_'+year+''+month)[0] );
            highlightMonth( year , month , elem );
            scrollTopTo( top );
        }


        //  根据窗口滚动条更新时序年份状态
        var updateScrubberOnTop = function( top ){

            var years  = g('content').getElementsByClassName('c_year');
            var tops = [];

            for (var i = 0; i <years.length ; i++) {
                tops.push( years[i].offsetTop );
            };

            for(var i = 1; i <tops.length ; i++){

                if( top > tops[i-1] && top < tops[i] ){

                    var year = years[i-1].innerHTML;

                    expandScrubber(year,g('scrubber_year_'+year));
                    return ;
                }
            }

        }

        //  根据窗口滚动条更新时序月份状态
        var updateMonthOnTop = function( top ){

            var months  = g('content').getElementsByClassName('c_month');
            var tops = [];

            for (var i = 0; i <months.length ; i++) {
                tops.push( months[i].offsetTop );
            };

            for(var i = 1; i <tops.length ; i++){

                if( top > tops[i-1] && top < tops[i] ){

                    var info  = months[i-1].id.split('_');
                    var year  = info[2];
                    var month = info[3];
                    highlightMonth( year , month , g('scrubber_month_'+year+month) );

                    return ;
                }
            }
        }

        //  滚动条事件处理; 定位时间
        window.onscroll = function(){

            var top = document.body.scrollTop ;

            if( top > 200){
                g('scrubber').style.position = 'fixed';
                g('scrubber').style.left = (getBodyW()-960)/2+ 'px';
                g('scrubber').style.top  = '60px';
            }else{
                g('scrubber').style.position = '';
                g('scrubber').style.left =     '';
                g('scrubber').style.top  =     '';
            }

            //  更新时序状态
            updateScrubberOnTop( top );
            updateMonthOnTop( top );
        }

        //  窗口改变事件处理; 保持时序列表的位置
        window.onresize = function(){
            window.onscroll();
        }
    </script>

</body>
</html>